<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>垂直拖放</title>
<link rel="stylesheet" href="css/jquery.dad.css">
<style>
.jq22 { width: 1000px; margin: 0 auto; font-family: arial,SimSun; font-size: 0;}
.jq22 .item { width: 100%; margin-bottom: 20px;}
.jq22 .item1 { background-color: #1faeff;}
.jq22 .item2 { background-color: #ff2e12;}
.jq22 .item3 { background-color: #00c13f;}
.jq22 .item4 { background-color: #e1b700;}
.jq22 .item5 { background-color: #7200ac;}
.jq22 span { display: block; height: 50px; line-height: 50px; font-size: 2rem; text-align: center; color: #fff;}
</style>
</head>

<body>
<h1>垂直拖放</h1>

<div class="jq22">
	<div class="item item1"><span>1</span></div>
	<div class="item item2"><span>2</span></div>
	<div class="item item3"><span>3</span></div>
	<div class="item item4"><span>4</span></div>
	<div class="item item5"><span>5</span></div>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.dad.min.js"></script>
<script>
$(function(){ 
	$('.jq22').dad();
});
</script>

</body>
</html>